<template>
	<view class="work">
		<nav-bar title="衷依慧店" :showLeftIcon="false"></nav-bar>
		<view class="message" v-if="userInfo.roles[0].roleId === 103">
			提示：{{ userInfo.userName }}技师，明日{{tomorrowFormatted}}
		</view>
		<scroll-view scroll-y="true" :style="{ height: scrollHeight }">
			<view class="content">
				<view class="store-check">
					<view class="label">选择门店：</view>
					<uni-data-select v-model="storeId" placeholder="请选择门店" :localdata="storeList"
						@change="storeChange"></uni-data-select>
				</view>
				<view class="arrange flexjsbac">
					<view v-for="(item,index) in tabList" :key="index" v-if="item.title != '排钟'"
						:class="['arrangeItem flexJcac', selectItem == item.title ? 'active' : '']"
						@click="select(item)">
						<image class="img" :src="selectItem == item.title ? item.seletIcon : item.icon" alt=""
							srcset="" />
						<view>{{ item.title }}</view>
					</view>
				</view>

				<view class="" v-if="selectItem == '暂停'">
					<suspend :storeId='storeId' />
				</view>
				<view v-if="selectItem == '排班' && userInfo.roles[0].roleId === 103">
					<calendar-box :showEditIcon="false" :scheduleData="scheduleData"
						@changeMonth="changeMonth"></calendar-box>
				</view>
				<view class="" v-if="selectItem == '请假'">
					<askForLeave :storeId='storeId' />
				</view>
				<view class="" v-if="selectItem == '排钟'">
					<Chimes :storeId='storeId' />
				</view>
				<view class="" v-if="selectItem == '工资'">
					<Salary :storeId='storeId' />
				</view>
			</view>
		</scroll-view>
		<you-popup :popupVisible="shopVisible" popupTitle="选择门店" @popupClose="shopVisible = false" bgColor="#fff"
			dialogWidth="700rpx">
			<view slot="popupContent">
				<!-- 标题 -->
				<view class="popup-contain">
				</view>
			</view>
			<view slot="btnBox" class="popup-submit flexJcac">
				<view class="cancel" @click="shopVisible = false">取消</view>
			</view>
		</you-popup>
		<view class="opera-btn">
			<view class="schedule-btn" v-if="userInfo.roles[0].roleId === 101&&selectItem == '排班'"
				@click="clickSchedule">给门店员工排班</view>
		</view>
	</view>
</template>

<script>
	import YouPopup from "@/components/you-popup/index.vue"
	import NavBar from "@/components/nav-bar"
	import CalendarBox from '../../subPages/work/components/calendarBox'
	import Suspend from '../../subPages/work/components/suspend'
	import AskForLeave from '../../subPages/work/components/askForLeave'
	import Chimes from '../../subPages/work/components/chimes'
	import Salary from '../../subPages/work/components/salary'
	import {
		fetchStoreList,
		fetchTechSchedule
	} from '@/api/work'
	export default {
		name: "index",
		components: {
			NavBar,
			YouPopup,
			Suspend,
			AskForLeave,
			Chimes,
			Salary,
			CalendarBox
		},
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
				storeId: 0,
				storeList: [],
				selectItem: '排班',
				tabList: [
					{
						title: '排班',
						icon: '/static/images/work/2.png',
						seletIcon: '/static/images/work/21.png'
					},
					{
						title: '暂停',
						icon: '/static/images/work/1.png',
						seletIcon: '/static/images/work/11.png'
					},{
						title: '请假',
						icon: '/static/images/work/3.png',
						seletIcon: '/static/images/work/31.png'
					},
					{
						title: '排钟',
						icon: '/static/images/work/4.png',
						seletIcon: '/static/images/work/41.png'
					},
					{
						title: '工资',
						icon: '/static/images/work/5.png',
						seletIcon: '/static/images/work/51.png'
					}
				],
				shopVisible: false,
				scrollHeight: "",
				chooseDate: '',
				scheduleData: {},
				tomorrowFormatted: '',
			}
		},
		created() {
			this.scrollHeight = this.$store.getters.heightData.mainHeight - 40 + 'px'
			this.getStoreList()
			if (this.userInfo.roles[0].roleId === 103) {
				this.getTchSchedule()
			}
		},
		methods: {
			getFullData(data) {
				if (data > 9) return data
				if (data < 9) return '0' + data
			},
			getTchSchedule() {
				const currentDate = new Date()
				const year = currentDate.getFullYear()
				const month = this.getFullData(currentDate.getMonth() + 1)

				const params = {
					userId: this.userInfo.userId,
					month: this.chooseDate || year + '-' + month
				}
				console.log(this.chooseDate, year + '-' + month, '142142142');
				fetchTechSchedule(params).then(res => {
					const currentDate = new Date();
					currentDate.setDate(currentDate.getDate() + 1);

					const tomorrowYear = currentDate.getFullYear();
					const tomorrowMonth = String(currentDate.getMonth() + 1).padStart(2, '0');
					const tomorrowDay = String(currentDate.getDate()).padStart(2, '0');

					const tomorrowDate = `${tomorrowYear}-${tomorrowMonth}-${tomorrowDay}`;

					const allDataArrays = Object.values(res.data.viewDate);

					// 合并所有数组
					const allData = allDataArrays.flat();
					// 获取当前日期
					const today = new Date();

					// 获取明天的日期
					const tomorrow = new Date(today);
					tomorrow.setDate(today.getDate() + 1);

					// 获取明天的年、月、日
					const year = tomorrow.getFullYear();
					let month = tomorrow.getMonth() + 1; // 月份从0开始计数，所以需要加1
					month = month < 10 ? '0' + month : month; // 如果月份小于10，前面补0
					let day = tomorrow.getDate();
					day = day < 10 ? '0' + day : day; // 如果日期小于10，前面补0

					// 输出明天的日期
					const tomorrowFormatted = `${year}-${month}-${day}`;
					let found = false;
					for (const item of allData) {
						if (item.date === tomorrowFormatted) {
							this.tomorrowFormatted = item.shiftName
							found = true;
						}
					}

					// 如果没有匹配的对象，则打印 "明天暂无排班"
					if (!found) {
						this.tomorrowFormatted = '暂无排班'
					}

					if (res.code !== 200) return
					this.scheduleData = res.data.viewDate

				})
			},
			// 更改月份
			changeMonth(date) {
				this.chooseDate = date
				this.getTchSchedule()
			},
			getStoreList() {
				fetchStoreList().then(res => {
					if (res.code !== 200) return
					this.storeList = res.data.map(item => {
						return {
							value: item.id,
							text: item.storeName
						}
					})
					this.storeId=this.storeList[0].value
				})
			},
			storeChange(value) {
				this.storeId = value
			},
			clickSchedule() {
				if (!this.storeId) {
					uni.showToast({
						title: '请选择门店',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '/subPages/work/schedule'
				})
			},

			select(item) {
				this.selectItem = item.title
			}
		},
	}
</script>

<style lang="scss" scoped>
	.work {
		position: relative;

		.message {
			display: flex;
			align-items: center;
			height: 40px;
			padding: 0 38rpx;
			background: #C27E15;
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
		}

		.content {
			margin: 40rpx;

			.arrange {
				.arrangeItem {
					width: 119rpx;
					height: 126rpx;
					border-radius: 15rpx 15rpx 15rpx 15rpx;
					opacity: 1;
					color: #333333;
					background-color: #fff;
					flex-direction: column;

					>.img {
						height: 48rpx;
						width: 48rpx;
					}
				}

				.active {
					background-color: #C27E15;
					color: #fff;
					position: relative;
				}

				.active::before {
					content: "";
					width: 0px;
					height: 0px;
					border-top: 5px solid #C27E15;
					border-left: 5px solid transparent;
					border-right: 5px solid transparent;
					position: absolute;
					bottom: -10rpx;
				}
			}
		}

		.opera-btn {
			position: absolute;
			position: fixed;
			bottom: 150rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			padding: 34rpx;

			.view-time,
			.schedule-btn {
				width: 48%;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 2rpx solid #c27e15;
				border-radius: 50rpx;
				font-size: 32rpx;
				color: #c27e15;
			}

			.schedule-btn {
				color: #FFF;
				background-color: #c27e15;
			}
		}
	}

	::v-deep .calendar .uni-calendar-item__weeks-box .uni-calendar-item__weeks-box-item {
		width: 90rpx;
	}

	::v-deep .calendar .uni-calendar__header {
		display: none;
	}

	::v-deep .store-check {
		display: flex;
		align-items: center;
		margin: 30rpx 0;

		.label {
			font-weight: bold;
		}

		.uni-select {
			background-color: #FFF;
		}
	}
</style>